<template>
	<div>
		<div v-if="showList">
			<div class="crumbs">
				<el-breadcrumb separator="/">
					<el-breadcrumb-item><i class="el-icon-lx-cascades"></i> 每日练习</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
			<div class="container">
				<div class="handle-box row-me row-center flex-sb">
					<div class="row-me row-center">
						<el-date-picker type="date" placeholder="导出日期" v-model="day" format="yyyyMMdd" value-format="yyyyMMdd"
							class="handle-input mr10"></el-date-picker>
						<el-button type="primary" @click="getRandomQuestion">查询</el-button>
						<el-button class="mr10">重置</el-button>
						<el-button type="primary" icon="el-icon-folder-opened" class="handle-del mr10" @click="exportHandle">批量导出
						</el-button>
					</div>
					<el-button type="primary" class="handle-del" @click="randomConfig">参数设置
					</el-button>
				</div>
				<el-table :data="tableLibData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
					<el-table-column type="expand">
						<template slot-scope="props">
							<b>
								<p v-html="props.row.title"></p>
							</b>
							<div v-if="props.row.type.value == 0 || props.row.type.value == 1">
								<el-table :data="props.row.optionList" style="width: 100%">
									<el-table-column width="50">
										<template slot-scope="scope">{{ option[scope.$index] }}</template>
									</el-table-column>
									<el-table-column>
										<template slot-scope="scope">
											<p v-html="scope.row.content"></p>
										</template>
									</el-table-column>
								</el-table>
							</div>
							<br />
							<b>
								<p>答案：<span v-html="props.row.answer"></span></p>
							</b>
							<b>
								<p>解析：<span v-html="props.row.textExplain"></span></p>
							</b>
							<b class="row-me">
								<p>来源：
								<div class="row-me row-center flex-wrap" v-if="props.row.questionSources">
									<el-tag class="margin-right10" v-for="(item,index) in props.row.questionSources"
										:key="index">{{item.name}}</el-tag>
								</div>
							</b>
						</template>
					</el-table-column>

					<!-- 表格头部 -->
					<el-table-column type="selection" width="55" align="center"></el-table-column>
					<el-table-column label="序号" width="55" align="center">
						<template slot-scope="scope">
							{{ scope.$index + 1 }}
						</template>
					</el-table-column>
					<el-table-column label="题目ID" width="80" align="center">
						<template slot-scope="scope">
							<el-button type="text" @click="openLibraryHandle1(scope.$index, scope.row.id)">
								{{ scope.row.id }}
							</el-button>
						</template>
					</el-table-column>
					<el-table-column label="试题" :show-overflow-tooltip="true">
						<template slot-scope="scope">
							<p v-html="praseTitle(scope.row.title)"></p>
						</template>
					</el-table-column>
					<el-table-column prop="type.name" width="150" label="题型" align="center"></el-table-column>
					<el-table-column prop="category1" width="150" label="分类" align="center">
						<template slot-scope="scope">
							<span>{{ scope.row.category3 }}/{{ scope.row.category2 }}/{{ scope.row.category1 }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="vip" width="140" label="题目属性" align="center">
						<template slot-scope="scope">
							{{ scope.row.vip ? '高级题' : '普通题' }}
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<!--导出试题展示-->
		<div v-if="exportQuestion">
			<el-page-header @back="goBack" content="试题筛选结果集" style="margin-bottom: 30px;"></el-page-header>

			是否分离 ：
			<el-switch v-model="delivery"></el-switch>
			是否显示来源 ：
			<el-switch v-model="laiyuan"></el-switch>
			<el-button type="primary" style="margin-left:20px" @click="suiji()">随机</el-button>
			<br />
			<el-button @click="selectAll">复制全部</el-button>

			<div id="aaa">
				<el-card v-if="!delivery" class="box-card" style="margin-bottom: 10px;"
					v-for="(question, index) in exportQuestionList">
					<b>
						<p v-if="laiyuan"
							v-html="(index + 1 + '.' + question.title + (question.abbreviation == null ? '' : question.abbreviation))+(question.examSource==null?'':'(来源：'+question.examSource.join(',')+')')">
						</p>
						<p v-if="!laiyuan"
							v-html="(index + 1 + '.' + question.title + (question.abbreviation == null ? '' : question.abbreviation))">
						</p>
					</b>

					<b v-if="question.titleImages">
						<img style="height: 100px;width: auto;" :src="img" v-for="img in (question.titleImages)">
					</b>
					<div v-if="question.type.value == 0 || question.type.value == 1">
						<p v-for="(item, index) in question.optionList">{{ optionNoArr[index] }}. {{ item.content }}</p>
					</div>
					<b>
						<p style="color:red">答案：<span v-html="question.answer"></span></p>
					</b>
					<b>
						<p>解析：<span v-html="question.textExplain"></span></p>
					</b>
				</el-card>

				<div v-if="delivery">
					<el-card class="box-card" style="margin-bottom: 10px;" v-for="(question, index) in exportQuestionList">
						<b>
							<p v-if="laiyuan"
								v-html="(index + 1 + '.' + question.title + (question.abbreviation == null ? '' : question.abbreviation))+(question.questionSource==null?'':'('+question.questionSource+')')">
							</p>
							<p v-if="!laiyuan"
								v-html="(index + 1 + '.' + question.title + (question.abbreviation == null ? '' : question.abbreviation))">
							</p>
						</b>
						<div v-if="question.type.value == 0 || question.type.value == 1">
							<p v-for="(item, index) in question.optionList">{{ optionNoArr[index] }}. {{ item.content }}
							</p>
						</div>
					</el-card>

					<el-divider></el-divider>

					<el-card class="box-card" style="margin-bottom: 10px;" v-for="(question, index) in exportQuestionList">
						<b>
							<p><span v-html="index + 1 + '.' + question.answer"></span></p>
						</b>
						<b>
							<p>解析：<span v-html="question.textExplain"></span></p>
						</b>
					</el-card>
				</div>
			</div>
		</div>

		<!-- 参数设置 -->
		<el-dialog title="参数设置" :visible.sync="randomConfigVisible" width="40%">
			<el-form :model="randomForm" label-width="120px">
				<el-form-item label="设置题型数量:">
					<div class="row-me row-center margin-bottom10" v-for="(item,index) in randomData" :key="index">
						<el-select filterable v-model="item.questionType" placeholder="选择题型" :clearable="true" class="width200">
							<el-option v-for="sort in types" :key="sort.id" :label="sort.name" :value="sort.id">
							</el-option>
						</el-select>
						<i class="el-icon-arrow-right font-size26 font-bold"></i>
						<el-input v-model="item.count" class="width200" placeholder="请输入题型数量" @input="sum" type="number"></el-input>
						<div class="row-me row-center margin-left10" v-if="randomData.length-1==index">
							<i class="el-icon-circle-plus margin-right10 font-size18 pointer" @click="clickAdd(item)"></i>
							<i class="el-icon-remove font-size18 pointer" @click="[randomData.pop(),sum()]" v-if="index!=0"></i>
						</div>
					</div>
				</el-form-item>
				<el-form-item label="题目总数:">
					<div>{{count}}</div>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="randomConfigVisible = false">取 消</el-button>
				<el-button type="primary" @click="andomConfigSave()">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import library from '@/views/question/library.vue';
	import QRCode from 'qrcodejs2';
	import SingleUploadOss from '@/views/Upload/SingleUploadOss';
	import ExamQuestionType from '@/components/ExamQuestionType';

	export default {
		components: {},
		name: 'categoryTable',
		data() {
			return {
				option: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'],
				exportQuestionList: [],
				delivery: false,
				day: "",
				laiyuan: false,
				optionList: [],
				showList: true,
				tableData: [],
				videoData: [],
				types: [],
				typesTotal: [],
				libraryList: [],
				multipleSelection: [],
				delList: [],
				idx: -1,
				id: -1,
				exportQuestion: false,
				optionNoArr: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'],
				dialogTitle: '',
				props: {
					emitPath: false,
					lazy: true,
					lazyLoad: this.lazyLoad,
					checkStrictly: true
				},
				citys: [],
				token: localStorage.getItem('htk_token'),
				Authorization: {
					Authorization: localStorage.getItem('htk_token')
				},
				tableLibData: [],
				queryLib: {
					examPaperId: ''
				},
				tianjia: '',
				multipleLibSelection: [],
				qrcodeVisible: false,
				editVisible1: false,
				editVisible2: false,
				libraryVisible: false,
				videoVisible: false,
				randomConfigVisible: false,
				danxuan: true,
				duoxuan: false,
				panduan: false,
				luru: false,
				daan: true,
				scoreDialogTitle: '',
				scoreVisible: false,
				setScoreQuestion: null,
				scoreForm: {
					score: ''
				},
				query: {

					type: 0
				},
				randomForm: {},
				randomData: [{}],
				types: [],
				count: 0
			};
		},
		created() {
			let yy = new Date().getFullYear()
			let mm = (new Date().getMonth() + 1) < 10 ? '0' + (new Date().getMonth() + 1) : (new Date().getMonth() + 1)
			let dd = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
			this.day = "" + yy + mm + dd;
			this.getRandomQuestion();
			this.getType()
			this.getRandomConfig()
		},
		filters: {
			testPaperStatus(value) {
				if (value == 0 || value == null) return '待发布';
				else if (value == 1) return '审核中';
				else if (value == 2) return '已发布';
				else if (value == 3) return '未通过';
			}
		},
		methods: {
			sum() {
				let arr = Array.from(this.randomData, ({
					count
				}) => {
					if (!this.$.isEmpty(count)) {
						return count
					}
				})
				arr = arr.filter(item => item)
				this.count = eval(arr.join("+"));
			},

			clickAdd(item) {
				// if (item.questionType && item.count) {
				// 	this.randomData.push({})
				// } else {
				// 	this.$message.warning('请完善内容再添加!')
				// }
				this.randomData.push({})
			},
			async andomConfigSave() {
				const res = await this.$http.post(this.$host + '/admin/question/saveRandomConfig', this.randomData)
				if (res.data.code == 1000) {
					this.randomConfigVisible = false
					this.getRandomConfig()
				}
			},
			async getRandomConfig() {
				const res = await this.$http.get(this.$host + '/admin/question/getRandomConfig')
				this.randomData = res.data.data
			},
			getType() {
				var vm = this;
				this.$http
					.get(this.$host + '/admin/questionType/getQuestionSort')
					.then(function(response) {
						if (response.data.code != 1000) {
							vm.$message.error('搜索服务异常');
							return;
						}
						vm.types = response.data.data;
					});
			},
			randomConfig() {
				this.randomConfigVisible = true
			},
			goBack() {
				this.showList = true;
				this.exportQuestion = false;
			},
			//列表时过滤富文本
			praseTitle(title) {
				var reg = /&nbsp;/g;
				title = title.replace(/<\/?[^>]*>|(\n|\t|\r)|(\s)/g, '').replace(reg, '');
				return title;
			},
			handleSelectionChange_Item(val) {
				this.multipleSelection_Item = val;
			},
			handleSizeChange(val) {
				this.$set(this.query, 'pageSize', val);
				this.getData();
			},
			//获取试题
			getRandomQuestion() {
				var vm = this;
				let params = {
					day: vm.day
				};
				this.$http
					.get(this.$host + '/admin/question/getRandomQuestion', {
						params: params,
						headers: {
							Authorization: vm.token,
							'Content-Type': 'application/json'
						}
					})
					.then(function(response) {
						if (response.data.code != 1000) {
							vm.$message.error('搜索服务异常');
							return;
						}
						vm.tableLibData = response.data.data;
					});
			},

			// 试卷触发搜索按钮
			handleSearch() {
				this.getData();
			},

			settingAllScore() {
				this.scoreVisible = true;
			},

			// 试卷分页导航
			handlePageChange(val) {
				this.$set(this.query, 'pageNumber', val);
				this.getData();
			},
			// 试题分页导航
			handlePageChange2(val) {
				this.getLibraryData();
			},
			handlePageChangeE(val) {
				this.getTestPaperQuestion();
			},
			handleSelectionLibChange(val) {
				this.multipleLibSelection = val;
			},

			exportHandle() {
				this.showList = false;
				this.exportQuestionList = this.tableLibData;
				this.exportQuestion = true;
			},
			//随机打乱试题筛选结果集
			suiji() {
				console.log(this.exportQuestionList);
				this.exportQuestionList.sort(() => Math.random() - 0.5);
				this.exportQuestionList.sort(function(p1, p2) {
					return p1.type.value - p2.type.value
				});
			},
			selectAll() {
				// 获取selection对象
				var selection = window.getSelection();
				// 清空selection对象
				selection.removeAllRanges();

				// 创建一个Range实例
				var ele = document.getElementById('aaa');
				var range = new Range();
				range.selectNodeContents(ele);

				// selection对象设置range实例
				selection.addRange(range);

				document.execCommand('Copy');

				this.$message.success('已复制到粘贴板');
			},
		}
	};
</script>

<style scoped>
	.handle-box {
		margin-bottom: 20px;
	}

	.handle-select {
		width: 120px;
	}

	.handle-input {
		width: 200px;
		display: inline-block;
	}

	.table {
		width: 100%;
		font-size: 14px;
	}

	.red {
		color: #ff0000;
	}

	.mr10 {
		margin-right: 10px;
	}

	.table-td-thumb {
		display: block;
		margin: auto;
		width: 40px;
		height: 40px;
	}
</style>
<style>
	.cascader .el-cascader-menu__wrap {
		height: 700px !important;
	}
</style>